<template>
  <div class="dance-music-newsongs">
    <div class="newsong-title">
      <b-menu
        class="newsongs-meu"
        :menu="areas"
        item-height="30px"
        item-width="80px"
        :active-color="getActiveColor"
        @click="handleArea"
      >
      </b-menu>
    </div>
    <song-list :song-list="musicList"></song-list>
  </div>
</template>
<script>
import { theme } from '../../mixin/global/theme'
import songList from '../../components/Songlist/song-list.vue'
import { _getTopSongs } from '../../network/newSong'
import { _getSongsDetail } from '../../network/ranklist'
import { formatDate } from '../../utils/tool'
export default {
  mixins: [theme],
  components: { songList },
  data () {
    return {
      areas: [
        { value: 0, content: '全部' },
        { value: 7, content: '华语' },
        { value: 96, content: '欧美' },
        { value: 16, content: '韩国' },
        { value: 8, content: '日本' }
      ],
      currentArea: 0,
      musicList: [] //最新音乐列表
    }
  },
  created () {
    this.getNewSong()
  },
  methods: {
    handleArea (index) {
      this.currentArea = this.areas[index].value
      this.getNewSong()
    },
    // 获取最新音乐
    async getNewSong () {
      this.musicList = []
      var res = await _getTopSongs(this.currentArea)
      console.log(res)
      let list = res.data.data //100条数据
      // 处理数据
      for (let i in list) {
        this.musicList.push({
          id: list[i].id,
          name: list[i].album.name,
          album: list[i].album.company,
          arist: list[i].artists[0].name,
          pic: list[i].album.picUrl,
          time: formatDate(new Date(list[i].bMusic.playTime), 'mm:ss')
        })
        console.log(this.musicList)
        // }
        //根据id请求数据
        // for (let i in list) {
        //   // 获取歌曲详情接口
        //   var songDetail = await _getSongsDetail(list[i].id)
        //   console.log(songDetail)
        // }
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
